<template>
<uni-shadow-root class="view-new-aikucun-aikucun_hot_product"><template name="aikucun_hot_product">
    <view class="hot_product_area2" @click="closeCardShare">
        <view class="hot_product_list2">
            <view v-for="(items,index) in (products)" :key="items.index" :class="'hot_product_item2 '+(items.stock==0?"hot_product_ended":"")">
            <view :class="items.stock==0?'hot_product_item2_bg':''"></view>
              
              <view class="share_view "> 
                <view v-if="(!items.showShare)" class="sharePoint" :data-index="index" @click.stop.prevent="showCardShare">
                  <image src="http://image.aikucun.xyz/aikucun/2018_4/2/11/28/48_387.jpg?imageMogr2/thumbnail/120x/interlace/0 "></image>
                </view>  
                <view class="share_box" v-if="items.showShare">
                  <button class="share_box_item" open-type="share" :data-index="index">
                    <image src="http://image.aikucun.xyz/aikucun/2018_4/2/11/35/2_810.jpg?imageMogr2/thumbnail/120x/interlace/0"></image>
                    <text>分享</text>
                  </button>
                  <button class="share_box_item" :data-index="index" @click="showKefuWechatCode">
                    <image src="http://image.aikucun.xyz/aikucun/2018_4/2/11/36/30_199.jpg?imageMogr2/thumbnail/120x/interlace/0"></image>
                    <text>客服</text>
                  </button>
                  
                </view>
              </view> 

                <view class="hot_product_item2_title font_b">{{items.brandName}}</view>
                <view class="flex">
                  <text class="hot_product_item2_derection font_08">{{items.name}}</text>
                  
                </view>
                <view class="hot_product_num_price_wrap">
                  <view class="hot_product_item2_priceInfoContainer">
                    <view class="hot_product_item2_price font_red"><em>￥</em>{{items.price}}</view>
                    <view class="hot_product_item2_price_old">￥{{items.tagPrice}}</view>
                  </view>

                  <view v-if="items.stock < 10" class="hot_product_remain_num">仅剩<text>{{items.stock}}</text>件</view>
                  <view v-else-if="items.stock == 0">已售罄</view>
                  <view v-else></view>
                  
                  
                </view>
                <swiper interval="200" :style="'height:'+(((sysWidth - 70)/4)+20)+'px;'">
                  <swiper-item v-for="(imageL,i) in (items.imageListArr)" :key="imageL.image_+(i)" class="hot_product_item2_image_container">
                      <block v-for="(image,j) in (imageL)" :key="image.image_+(j)">
                        <view class="hot_product_item2_image_area" :style="'width:'+((sysWidth - 70)/4)+'px;height:'+((sysWidth - 70)/4)+'px;'">
                        <image mode="aspectFill" :src="image.imagePath" :data-urls="items.imageListWatcher" :data-me="image.imagePath" @click="watchBigImage"></image>
                        </view>
                      </block>
                    
                  </swiper-item>
                </swiper>
                <view class="hot_product_item2_bottom">
                  <view class="products_list_item_card">
                      <view class="date_container">
                          <view class="date_hour_s font_08" v-if="items.resultTime.lever == 1">
                              <view v-if="items.resultTime.Time.second > 1">距结束：</view>
                              <text v-if="items.resultTime.Time.second > 1"> {{items.resultTime.Time.second}} </text>
                              
                              <text class="over_text" v-else style="width:200rpx; color:#aaa; display:inline-block;"> 已结束 </text>
                          </view>
                          <view class="date_hour_s font_08" v-else-if="items.resultTime.lever == 2">
                              <view>距结束：</view>
                              <text> {{items.resultTime.Time.minute}} </text>:
                              <text> {{items.resultTime.Time.second}} </text>
                          </view>
                          <view class="date_hour_s font_08" v-else-if="items.resultTime.lever == 3">
                              <view>距结束：</view>
                              <text> {{items.resultTime.Time.hour}} </text>:
                              <text> {{items.resultTime.Time.minute}} </text>:
                              <text> {{items.resultTime.Time.second}} </text>
                          </view>

                          <view class="date_hour_s font_08" v-else-if="items.resultTime.lever == 4">
                              <view>距结束：</view>
                              <text> {{items.resultTime.Time.day}} </text> 天
                          </view>
                      </view>
                  </view>
                  
                  <view class="hot_product_item2_bottom_butn_container">
                     <view :style="'color:'+(platformSetting.defaultColor)+';border-color:'+(platformSetting.defaultColor)" :class="'hot_product_item2_bottom_butn_add font_08 '+(items.stock==0?'btn_bg_gray':'')" data-bindbuy="addto" :data-index="index" @click="bindBuy">加入购物车</view>
                     <view :style="'background:'+(platformSetting.defaultColor)+'; border-color:'+(platformSetting.defaultColor)" class="hot_product_item2_bottom_butn font_08" data-bindbuy="buy" :data-index="index" @click="bindBuy">立即抢购</view>
                  </view>
                 
                </view>
                <view v-if="items.stock==0" class="hot_product_ended_circle">已抢光</view>
                <view v-else></view>
            </view>
        </view>
        <view v-if="listEnd" class="dixian"> 更多商品请关注今日活动 </view>
    </view>
</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'view-new/aikucun/aikucun_hot_product'

Component({})

export default global['__wxComponents']['view-new/aikucun/aikucun_hot_product']
</script>
<style platform="mp-weixin">
/* 爆款推荐 */
/* 
.hot_product_area{
    display: flex;
    flex-direction: column;
    background: #cccccc;
}
.hot_product_list{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px 10px 10px;
    background: #f9f9f9;
}

.hot_product_list .hot_product_item:nth-child(2n){
    margin-left: 10px;
}

.hot_product_item{
    margin-bottom: 10px;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 5px;
}
.hot_product_item image{

    width: 100%;
    height: 150px;
}
.hot_product_item_text{
    background: #fff;
    width:100%;
    overflow: hidden;
}
.hot_product_item_text view{
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 5px 10px 8px 5px;
    font-size: 13px;
    color: #333;
    line-height: 21px;
    height:36px;
}
.hot_product_item_text text{
    text-align: left;
    overflow: hidden;
    padding: 5px 10px 8px 5px;
    font-size: 20px;
    color: #FF3D3D;
    line-height: 28px;
} */


.hot_product_area2{
  display: flex;
  flex-direction: column;
}
.hot_product_list2{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 10px;

}
.hot_product_item2{
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    padding: 10px;
    border-radius: 0.4em;
    position: relative;
}
.hot_product_item2_bg{
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
/* .hot_product_item2:nth-child(1){
    border-top-left-radius: 0;
    border-top-right-radius: 0;
} */
.hot_product_item2_title{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: #555;
}
.hot_product_item2_derection{
  margin-top: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #999;
  /* text-indent:5px; */
}
.hot_product_item2_image_container{
  margin-top:10px; 
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.hot_product_item2_image_area{
  background: #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin-left: 10px;
}
.hot_product_item2_image_area:nth-child(1){
  background: #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin-left:0;

}

.hot_product_item2_image_area image{
  width: 100%;
  height: 100%;
}
.hot_product_item2_bottom{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.hot_product_item2_priceInfoContainer{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  /* line-height: 2em; */
}
.hot_product_item2_bottom_butn_container{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.hot_product_item2_bottom_butn_add{
  width: 6em;
  height: 2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #333;
  border: 1px solid #333;
  border-radius: 5px;
  margin-right: 0.4em;
}
.hot_product_item2_bottom_butn{
  width: 6em;
  height: 2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #333;
  color: #eee;
  border-radius: 5px;
  border: 1px solid #333;
}
.hot_product_item2_price{
  color:#e10000;
font-weight:bold;
font-size: 36rpx;

}
.hot_product_item2_price em{
  font-size: 24rpx;
  font-weight: bold;
}
.hot_product_item2_price_old{
  color: #aaa;
  text-decoration: line-through;
  margin-left: 5px;
  font-size:26rpx;
}




/* 分享组件 */
.share_view{
  position: absolute;
  right: 0.8em;
  top: 0.6em;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sharePoint{
  height: 1.4em;
  width: 1.4em;
  overflow: hidden;
}
.sharePoint > image{
  height: 100%;
  width: 100%;
}
.share_box{
  background: #fff;
  opacity: 0.9;
  width: 5em;
  height: 6em;
  border: 1px solid #ccc;
  border-radius: 0.2em;
}

.share_box_item{
  border-bottom: 1px solid #ccc;
  height: 50%;
  font-size: 0.8em;
  background: white;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
  display: flex;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  box-sizing:content-box;
  border-radius: 0 !important;
  line-height: 1.2em;
  color: #555;
}
button::after{
  box-sizing:content-box;
  border: 0px !important;
  border-radius: 0 !important;
}
.share_box_item > image{
  width:1.4em;
  height: 1.4em;
  margin-right: 0.6em;
}
/*增加仅剩几件*/
.hot_product_num_price_wrap{
  display: flex;
  margin-top:2rpx;
  justify-content: space-between;
  flex-direction: row;
  /* line-height:2em; */
}
.hot_product_remain_num{
  font-size: 24rpx;
  color: #e10000;
  font-weight: bold;
}
.hot_product_remain_num text{
  font-size: 36rpx;
  margin: 0 4rpx;
}
/*距结束的样式*/
.products_list_item_card{
    /* position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.6em;
    z-index: 3; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* border-top-right-radius: 10px;
    padding: 0 10px; */
    height: 64rpx;
    line-height: 64rpx;
    /* background: #fff; */
    color: #e10000;
    width: 100%;
    /* padding: 0 24rpx; */
    box-sizing: border-box;
    font-size:30rpx;
}

.products_list_item_card_date{
  /* color: #fff; */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* font-size: 0.8em; */
}
.products_list_item_card_date > image{
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #ddd;
}

.date_title1{
  /* margin-left: 0.4em; */
  font-weight:bold;
}
.date_container{
  /* margin-top: 0.4em; */
}
.date_hour_s{
  display: flex;
  flex-direction: row;
  align-items: center;
  color:#000;
  font-weight: bold;
}
.date_hour_s > .over_text{
  background: none;
  color: #fff;
  margin-right: 0.2em;
  margin-left: 0.2em;
  width: 40rpx;
  height: 40rpx;
  /* font-size: 0.8em; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.4em;
}
.date_hour_s > text{
  background: #000;
  color: #fff;
  margin-right: 0.2em;
  margin-left: 0.2em;
  width: 40rpx;
  height: 40rpx;
  /* font-size: 0.8em; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.4em;
  font-weight: 600;
}
.hot_product_ended{
  background: #e5e5e5;  
  -moz-box-shadow:1rpx 2rpx 2rpx #d7d7d7 inset;                /* For Firefox3.6+ */
	-webkit-box-shadow:1rpx 2rpx 2rpx #d7d7d7 inset;           /* For Chrome5+, Safari5+ */  
	box-shadow:1rpx 2rpx 2rpx #d7d7d7 inset; /* For Latest Opera */
}
.btn_bg_gray{
  background: #e5e5e5;
}
.hot_product_list2 .hot_product_ended_circle{
  width: 238rpx;
  height: 238rpx;
  background: rgba(0,0,0,0.4);
  color:#fff;
  font-size: 60rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius:50%;
  margin-left: -119rpx;
  margin-top: -119rpx;
  text-align: center;
  line-height: 238rpx;
}
</style>